<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/homepages/css/main.css" type="text/css"></link>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/themes/icon.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.1.2.2.js"></script>
     <script type="text/javascript" src="${pageContext.request.contextPath}/homepages/js/forms.js"></script>
     <script type="text/javascript">
     	var basePath = "/";
		$(function(){
			var a = document.documentElement.clientHeight - 72;
			var b = document.documentElement.clientWidth - 25;
			basePath = '${pageContext.request.contextPath}';
			$('#DATALIST').datagrid({
				iconCls:'icon-save',
				nowrap: false,
				width:b,
				height:a,
				striped: true,				 
				collapsible:true,
				autoRowHeight: false,		
				//sortName: 'code',
				//sortOrder: 'desc',
				remoteSort: false,
				//idField:'code',
				fitColumns:true,
				columns:[[ 
			    ]],
				pagination:true,
				rownumbers:true
			});
			var configId= $('#configId').val();  
			var funcsId = $('#funcsId').val();
			$.ajax({
			   url: "${pageContext.request.contextPath}/pageConfig/createPages",
			   type:"post",
			   data: {'configId':configId,'funcsId':funcsId},
			   success: function(data){
			   		var columns = data.queryColumns;
			   		var buttons = data.buttons;			//按钮
			   		var datagridPro =data.columns;
					var clnObj = $('#COLUMNS');
					var butObj = $('#BUTTONS');
					var clnHTML = "";
					var clineCount = 3;
					var rowCount = 0;
					for(var i = 0; i < columns.length; i++){
						if(rowCount%clineCount == 0)clnHTML += "<tr>";
						clnHTML += "<td>"+columns[i].colnName+"</td>";
						clnHTML += "<td><input style=\"width: 90px;\"/></td>"
						rowCount++;
						if(rowCount%clineCount == 0)clnHTML += "</tr>";
					}
					clnObj.html(clnHTML);
					var blineCount = 3;
					var butHTML = "";
					rowCount = 0;
					for(var i = 0; i < buttons.length; i++){
						butHTML += "<input type='button' value='"+buttons[i].butnName+"' onclick="+buttons[i].scriptFunc+" />";
					}
					butObj.html(butHTML);
					
					var dataGrid = $('#DATALIST');
					var options = {  
							rownumbers: true  
						};
					var columns = new Array();
					for(var i = 0; i < datagridPro.length; i++){
						var column = {};
						column.title = datagridPro[i].colnName
						column.field = datagridPro[i].name;
						columns[i] = column;
					}
					var cc = new Array();
					cc[0] = columns;
					options.columns = (cc);
					dataGrid.datagrid(options);//根据配置选项，生成datagrid  
					dataGrid.datagrid("loadData", data);
				}
			});
		})
		function resizeGrid(){
			var a = document.documentElement.clientHeight - 72;
			var b = document.documentElement.clientWidth - 25;
			$('#DATALIST').datagrid('resize', {
				width:b,
				height:a
 	  		 });
		}
     </script>
     
     
     
  </head>
  
 <body  onresize="resizeGrid();">
	<form action="" method="post" id="queryForm">
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td>
					<!-- 部分查询框 -->
					<table id="COLUMNS">
					</table>
				</td>
				<td style="vertical-align: top;">
					<!-- 部分按钮 -->
					<div id="BUTTONS" style="width:195px;padding-left: 20px;"></div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<!-- 数据列表 -->	
					<table  id="DATALIST"></table>
				</td>
			</tr>
		</table>
	</form>
	<!--  获取隐藏的参数-->
	<input type="hidden" id="configId" value="${configId}"/>  
	<input type="hidden" id="funcsId" value="${funcsId}"/>
</body>
</html>
